<template>
	<div class="index">
		<div class="header">
			<div class="mask">
				<div class="main">
					<h1>智能家居可视化管理系统平台</h1>
					<el-button type="success" @click="exit">退出系统</el-button>
				</div>
			</div>
		</div>
		<div class="nav">
			<div class="main">
				<span>{{ mydate }}</span>
				<el-button type="primary" @click="set">系统设置</el-button>
				<el-button type="success" @click="center">个人中心</el-button>
			</div>
		</div>
    <div class="main">
        <DeviceItem v-for="(device, index) in devices" :key="index" :device="device" />
    </div>
	
	<Footer/>
	</div>
</template>

<script setup>
	import axios from 'axios';
	import {ref,onMounted} from 'vue';
	import { useRoute, useRouter } from 'vue-router';
	import {getDate} from '../../assets/js/common.js'; // 确保这个函数返回一个格式化好的日期字符串
	import Footer from './footer.vue';

	import DeviceItem from './DeviceItem.vue'; // 引入设备项组件
	// 创建路由实例用于导航
	const router = useRouter();

// 定义响应式变量
const mydate = ref('');
const devices = ref([]);

// 在组件挂载时获取设备信息
onMounted(() => {
    fetchDevices();
    mydate.value = getDate(new Date()); // 获取并设置当前日期
});

async function fetchDevices() {
    try {
        const userId = localStorage.getItem('user_id'); // 使用 camelCase
        const token = localStorage.getItem('token'); // 从本地存储获取 token
        const url = `user/device/query/${userId}`;

        // 使用 axios 进行 GET 请求
        const response = await axios.get(url, {
            headers: {
                'Authorization': `Bearer ${token}` // 如果 API 需要身份验证，添加 token
            }
        });

        if (response.data.code === 100) { // 根据实际的返回结构进行判断
            devices.value = response.data.data; // 更新设备数据，假设 data 是设备数据
        } else {
            console.error('Failed to fetch devices:', response.data.message);
            alert('无法获取设备信息，请稍后再试。'); // 用户友好的错误提示
        }
    } catch (error) {
        console.error('Error fetching devices:', error);
        alert('发生错误，请检查网络连接。'); // 用户友好的错误提示
    }
}


	// 生命周期钩子，在组件挂载时设置当前日期


	// 退出函数，清除存储并导航
	const exit = () => {
		localStorage.clear();
		sessionStorage.clear();
		router.push('/login'); // 导航到登录页面
	};

	// 系统设置函数，导航到设置页面
	const set = () => {
		router.push({
			path: '/System',
		});
	};
	const center =() =>{
		router.push({
			path: '/center',
		});
	}
	
</script>





<!-- 新语法糖 -->
<style scoped>
	.index {
		width: 100vw;
		height: 100vh;
	}

	/* 顶部banner */
	.index>.header {
		height: 40vh;
		/* 背景图不重复 */
		background: url('/pics/banner1.jpg') no-repeat;
		background-size: 100% 100%;
		/* opacity: 0.6; */
		/* 透明背景颜色 */
		/* background-color: rgba(255,255,255,0.6); */
	}

	/* 顶部蒙版样式 */
	.index>.header>.mask {
		height: 100%;
		background-color: rgba(0, 0, 0, 0.4);
	}

	/* 顶部退出系统 */
	.index>.header>.mask>.main {
		height: 100%;
		position: relative;
		box-sizing: border-box;
		padding-top: 10vh;
	}

	/* 标题文字 */
	.index>.header>.mask>.main>h1 {
		text-align: center;
		color: lightcyan;
		font-size: 3vw;
		/* 文字阴影 */
		text-shadow: 1px 1px 2px skyblue;
	}

	/* el的元素类名为el-button-success */
	.index>.header>.mask>.main>button {
		position: absolute;
		bottom: 0;
		right: 0;
	}

	/* 导航条 */
	.index>.nav {
		height: 10vh;
		background-color: #ddd;
		text-align: right;
		/* 文本行高设置 */
		line-height: 11vh;
	}

	.index>.nav>.main>span {
		color: black;
		margin-right: 1vw;
		font-size: 1vw;
		text-shadow: 1px 1px yellow;
	}

	/* 家居样式 */
	.index>.main {
		/* outline: 1px solid red; */
		/* 设置为弹性盒子,其子元素自动转成行内块元素,宽度不再全屏 */
		display: flex;
		/* 子元素撑满后转行显示 */
		flex-wrap: wrap;
		/* 父元素中子元素两端对齐方式*/
		/* space-around:两端留白，然后两端对齐 */
		/* space-between:两端不留白，然后分散对齐 */
		justify-content: space-between;
	}

	/* 家居样式 */
	.index>.main>.jiaju {
		display: flex;
		width: 28vw;
		margin-top: 2vh;
		margin-bottom: 2vh;
		/* 设置阴影x,y,模糊程序,大小*/
		box-shadow: 1px 1px 2px 2px #eee;
		/* border: 2px solid blue; */
	}

	/* 家居左边样式 */
	.index>.main>.jiaju>.pic {
		/* 占3等份 */
		flex: 3;
	}

	/* 家居左边图片样式 */
	.index>.main>.jiaju>.pic>img {
		/* 显式地设置一个大小 */
		width: 90%;
	}

	/* 家居右边简介*/
	.index>.main>.jiaju>.resume {
		/* 占1等份 */
		flex: 1;
	}

	.index>.main>.jiaju>.resume>p {
		height: 5vh;
		line-height: 5vh;
		font-size: 1vw;
	}
</style>